<template>
	<view class="discovery-first-wrap ss-flex ss-col-center">
		<view class="discovery-first">
			<view class="top-style">
				
				<image class="user-lingshi" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
				
				<count-to class="top-number font-DIN" :startVal="0" :endVal="0.237676" :decimals="6" :duration="3000"></count-to>
				
			</view>
			<view class="center-style font-PingFangRegular">
				灵石是充电的核心奖励，可兑换物品道具和参与灵石应用
			</view>
			<view class="bottom-style font-PingFangBold">
				去赠送
			</view>
			<view class="tab-items">
				<view class="tab-item" v-for="item in tabList">
					
					<view class="item-icon ss-flex ss-row-center ss-col-center">
						<image :src="sheep.$url.static(item.icon)" mode="widthFix" />
					</view>
					<view class="item-title font-PingFangRegular">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { CountTo } from 'vue3-count-to';
	
	const tabList = [
		{
			icon: "/assets/img/discovery-r1.png",
			title: "八荒斩"
		},
		{
			icon: "/assets/img/discovery-r2.png",
			title: "早起打卡"
		},
		{
			icon: "/assets/img/discovery-r3.png",
			title: "灵石产能"
		},
		{
			icon: "/assets/img/discovery-r4.png",
			title: "灵石议事厅"
		}
	]
</script>

<style lang="scss" scoped>
	.discovery-first-wrap{
		display: flex;
		flex-direction: row;
		justify-content: center;
		.discovery-first{
			width: 686rpx;
			height: 600rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			display: flex;
			flex-direction: column;
			
			.top-style{
				margin-top: 30rpx;
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.user-lingshi{
					width: 116rpx;
					height: 116rpx;
				}
				.top-number{
					margin-left: 22rpx;
					white-space: nowrap;
					height: 34rpx;
					font-family: DIN, DIN;
					font-weight: bold;
					font-size: 64rpx;
					color: #232323;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}  
			.center-style{
				margin-top: 34rpx;
				margin-left: 30rpx;
				width: 480rpx;
				height: 68rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.bottom-style{
				margin-top: 24rpx;
				margin-left: 30rpx;
				width: 160rpx;
				height: 70rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 4rpx solid #5350F1cd;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 26rpx;
				color: #232323;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.tab-items{
				margin-top: 50rpx;
				width: 626rpx;
				height: 188rpx;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.20)0%, rgba(0, 0, 0, 0.20)100%), rgba(83, 80, 241, 0.80);
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				align-self: center;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				.tab-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.item-icon{
						width: 80rpx;
						height: 80rpx;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.20)0%, rgba(0, 0, 0, 0.20)100%), rgba(83, 80, 241, 0.80);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						image{
							width:66rpx;
						}
					}
					.item-title{
						margin-top: 8rpx;
						height: 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
	
	
</style>
